<template>
    <div class="login-box">
        <header>
            <a href="#">
                <img class="avg-header" src="@/assets/images/logo.png" />
            </a>
        </header>
        <div class="main">
            <div class="title">
                <h1>忘记密码</h1>
            </div>
            <div class="form-box">
                <el-form label-position="top" label-width="auto" :rules="rules" :model="formInfo" ref="formInfoRef">
                    <el-form-item label="账号 Email" prop="account">
                        <el-input type="email" v-model="formInfo.account" placeholder="example@mail.com" />
                        <template #error>
                            <div class="form-error" style="">
                                <el-icon :size="24" color="#e65442">
                                    <Warning />
                                </el-icon>
                                <span>{{ message1 }}</span>
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input type="password" v-model="formInfo.password" placeholder="8-16位英数混合，允许特殊符号，区分大小写" />
                        <template #error>
                            <div class="form-error" style="">
                                <el-icon :size="24" color="#e65442">
                                    <Warning />
                                </el-icon>
                                <span>{{ message2 }}</span>
                            </div>
                        </template>
                    </el-form-item>

                    <el-form-item label="再次确认密码" prop="password">
                        <el-input type="password" v-model="formInfo.password" placeholder="请再次确认密码" />
                        <template #error>
                            <div class="form-error" style="">
                                <el-icon :size="24" color="#e65442">
                                    <Warning />
                                </el-icon>
                                <span>{{ message2 }}</span>
                            </div>
                        </template>
                    </el-form-item>

                    <el-form-item label="请输入验证码" prop="password">
                        <daojishi></daojishi>
                    </el-form-item>
                </el-form>
            </div>
            <div class="btn">
                <el-button type="danger" round>确认变更</el-button>
            </div>

        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Search, Warning } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import daojishi from '@/components/daojishi/daojishi.vue'

const router = useRouter();

const userAccount = {
    account: "hmms1660@163.com",
    password: "hmms1660",
};
const formInfoRef = ref(null);
const formInfo = reactive({
    account: "",
    password: "",
});

const message1 = ref(null);
const validateAccount = (rule, value, callback) => {
    const regEmail = /^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/;
    if (value === "") {
        message1.value = "账号不可为空";
        callback(new Error("账号不可为空"));
    } else {
        if (!regEmail.test(value.trim())) {
            message1.value = "账号格式错误或无法使用";
            callback(new Error("账号格式错误或无法使用"));
        } else {
            callback();
        }
    }
};

const message2 = ref(null);
const validatePass = (rule, value, callback) => {
    const regPass = /^[a-zA-Z0-9]{8,}$/;
    if (value === "") {
        message2.value = "密码不可为空";
        callback(new Error("密码不可为空"));
    } else {
        if (!regPass.test(value.trim())) {
            message2.value = "8-16位英数混合，允许特殊符号，区分大小写";
            callback(new Error("8-16位英数混合，允许特殊符号，区分大小写"));
        } else {
            callback();
        }
    }
};

const rules = reactive({
    account: [
        {
            required: true,
            trigger: "blur",
            validator: validateAccount,
        },
    ],
    password: [
        {
            required: true,
            trigger: "blur",
            validator: validatePass,
        },
    ],
});

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (
                formInfo.account == userAccount.account &&
                formInfo.password == userAccount.password
            ) {
                router.push("/");
            }
        }
    });
};
</script>

<style lang="scss" scoped>
header {
    position: sticky;
    top: 0em;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    height: 4rem;
    z-index: 30;
    background: #ffffff;
    display: flex;
    align-items: center;
}

.main {
    width: 100%;
    margin: 0 auto;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 4rem;

    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        h1 {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 4rem;
            letter-spacing: 0.05em;
            color: #1a202c;
            padding: 1rem;
            height: 4rem;
        }
    }

    .form-box {
        margin-top: 2rem;

        :deep(.el-form-item__label) {
            height: 4rem;
            line-height: 4rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            color: #1a202c;
        }

        :deep(.el-input) {
            display: flex;
            width: 100%;
            height: 3.5rem;
        }

        :deep(.el-input__wrapper) {
            background-color: #f7fafc;

            &.is-focus {
                box-shadow: 0 0 0 1px var(--theme-ui-colors-primary) inset;
            }
        }

        .forget {
            display: flex;
            align-items: center;
            justify-content: end;
            height: 3rem;
            margin-bottom: 2rem;

            a {
                font-size: 0.875rem;
                font-weight: 500;
                line-height: 1.5;
                letter-spacing: 0.05em;
                color: #ff8674;
            }
        }

        .form-error {
            margin: 1rem 0px 0px;
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 2;
            letter-spacing: 0.05em;
            color: #2d3748;
            display: flex;
            align-items: center;
            border-radius: 0.25rem;
            background-color: #fff4f2;
            padding: 1rem;
            gap: 0.5rem;
            box-shadow: none;
            width: 100%;

            span {
                font-size: 0.875rem;
                font-weight: 400;
                line-height: 2;
                letter-spacing: 0.05em;
                color: #e65442;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;

        :deep(.el-button) {
            width: 100%;
            max-width: 16rem;
            padding: 0 1rem;
            height: 3rem;
            line-height: 3rem;
            border-radius: 50rem;
        }
    }

    .tips {
        text-align: center;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;

        span {
            color: #718096;
        }

        a {
            color: #ff8674;
        }
    }
}

.avg-header {
    width: 35px;
}
</style>